<template>
  <div class="language-switcher">
    <label>{{ $t('language') }}:</label>
    <select v-model="currentLanguage" @change="changeLanguage">
      <option value="en">English</option>
      <option value="zh">中文</option>
    </select>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useI18n } from 'vue-i18next'

export default {
  setup() {
    const { t, i18next } = useI18n()
    const currentLanguage = ref(i18next.language)

    const changeLanguage = () => {
      i18next.changeLanguage(currentLanguage.value)
    }

    return { t, currentLanguage, changeLanguage }
  }
}
</script>

<style scoped>
.language-switcher {
  margin: 20px 0;
}
</style>